<template>
  <el-menu
    class="categories"
    default-active="0"
    @select="handleSelect"
    active-text-color="red">

      <el-menu-item index="0">
        <i class="el-icon-menu"></i>
        <span slot="title">全部</span>
      </el-menu-item>
      <div v-for="item in courseTypeList" :key="item.id">
        <el-menu-item :index="String(item.id)" >
          <i class="el-icon-menu"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </div>

  </el-menu>
</template>

<script>
    export default {
      name: 'CourseMenu',
      data () {
        return {
          courseTypeList: [],
          cid: ''
        }
      },
      mounted () {
        this.loadcourseTypeList()
      },
      methods: {
        handleSelect (key, keyPath) {
          this.cid = key
          this.$emit('indexSelect')
        },
        loadcourseTypeList () {
          var _this = this
          this.$axios.get('/course/courseTypeList').then((resp) => {
          if (resp && resp.data.code === 200) {
            _this.courseTypeList = resp.data.result
          } else {
            // 从后端返回错误信息
              this.$alert('<p style=" color:#F00;">' + resp.data.message + '</p>', '错误提示', {
                dangerouslyUseHTMLString: true
              })
          }
          })
        }
      }
    }
</script>

<style scoped>
  .categories {
    position: fixed;
    margin-left: 50%;
    left: -600px;
    top: 100px;
    width: 150px;
  }
</style>
